<script setup>
const props = defineProps({
  avatar: {
    type: String,
    default: '/images/avatar.png'
  }
})
defineEmits(['upload'])
</script>

<template>
  <div>
    <label for="avatar">
      <img :src="props.avatar" alt="上传头像">
      <div class="mask">上传头像</div>
    </label>
    <input type="file" id="avatar" @change="$emit('upload', $refs.avatar.files[0])" ref="avatar">
  </div>
</template>

<style scoped>
div {
  overflow: hidden;
}
label {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}
label img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.mask {
  transition: 150ms;
  opacity: 0;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, .35);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mask:hover {
  opacity: .8;
}
#avatar {
  display: none;
}
</style>